<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息登记" style="position: relative;" name="first">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="老人类别" prop="in_type">
                <el-select
                  v-model="ruleForm.in_type"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="1" label="智慧中心" :value="1"></el-option>
                  <el-option :key="2" label="养护中心" :value="2"></el-option>
                  <el-option :key="3" label="老年公寓" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="身份证号" prop="id_card">
                <el-input
                  v-model="ruleForm.id_card"
                  placeholder="请输入身份证号"
                  :rules="[
                    {
                      required: true,
                      message: '请输入身份证号',
                      trigger: 'blur',
                    },
                  ]"
                  @change="handleChangeCard"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  v-model="ruleForm.birthday"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  placeholder="请选择出生日期"
                  :picker-options="dataBeforeTodayOptions"
                  style="width: 100%"
                  @change="handleBirthdayToage"
                ></el-date-picker>
                <!-- <el-input v-model="ruleForm.birthday" placeholder="请选择出生日期"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="年龄" prop="age">
                <el-input
                  v-model="ruleForm.age"
                  placeholder="请输入年龄"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="ruleForm.sex"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="男" :value="1"></el-option>
                  <el-option :key="1" label="女" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="联系方式" prop="mobile">
                <el-input
                  v-model="ruleForm.mobile"
                  placeholder="请输入联系方式"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="民族" prop="nation">
                <el-select
                  v-model="ruleForm.nation"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.nation"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="宗教信仰" prop="religion">
                <el-select
                  v-model="ruleForm.religion"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="佛教" :value="1"></el-option>
                  <el-option :key="1" label="道教" :value="2"></el-option>
                  <el-option :key="2" label="基督教" :value="3"></el-option>
                  <el-option :key="3" label="伊斯兰教" :value="4"></el-option>
                  <el-option :key="4" label="其他" :value="5"></el-option>
                  <el-option :key="5" label="无宗教信仰" :value="6"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="婚姻状态" prop="marry">
                <el-select
                  v-model="ruleForm.marry"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.marry"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="老人类型" prop="type">
                <el-select
                  v-model="ruleForm.type"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.olderType"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="居住情况" prop="live_status">
                <el-select
                  v-model="ruleForm.live_status"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.live_status"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="经济来源" prop="finance_source">
                <el-select
                  v-model="ruleForm.finance_source"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.finance_source"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="劳动能力" prop="work">
                <el-select
                  v-model="ruleForm.work"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.work"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="文化程度" prop="edu">
                <el-select
                  v-model="ruleForm.edu"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.edu"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="医疗保障" prop="medical_security">
                <el-select
                  v-model="ruleForm.medical_security"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.medical_security"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="医保卡号" prop="medical_number">
                <el-input v-model="ruleForm.medical_number" placeholder="请输入医保卡号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="所在地" prop="areaArr">
                <el-cascader
                  ref="cascaderAddr1"
                  v-model="ruleForm.areaArr"
                  :options="addressData"
                  :show-all-levels="true"
                  :props="{ expandTrigger: 'hover' }"
                  style="width: 100%"
                  @change="handleChangeAddress"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="获取经纬度" prop="lat">
                <el-row>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-input
                      v-model="ruleForm.lng"
                      :disabled="true"
                    ></el-input>
                  </el-col>
                  <el-col
                    :xs="1"
                    :sm="1"
                    :md="1"
                    :lg="1"
                    :xl="1"
                    style="text-align: center"
                  >
                    --
                  </el-col>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-input
                      v-model="ruleForm.lat"
                      :disabled="true"
                    ></el-input>
                  </el-col>
                  <el-col
                    :xs="1"
                    :sm="1"
                    :md="1"
                    :lg="1"
                    :xl="1"
                    style="text-align: center"
                  >
                    -
                  </el-col>
                  <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-button size="medium" type="primary" @click="handleMap">
                      获取经纬度
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter" style="margin-bottom: 20px;">
            <el-col :offset="1" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-tooltip class="item" effect="dark" content="请先下载安装摄像头驱动程序，再尝试打开摄像头，如已安装请忽略" placement="top-start">
                <el-button size="medium" type="primary" @click="handleClickPhoto(true)">开启拍照功能</el-button>
              </el-tooltip>
              <el-button size="medium" type="primary" @click="handleClickPhoto(false)">关闭拍照功能</el-button>
              <el-tooltip class="item" effect="dark" content="下载驱动后请安装" placement="top-start">
                <el-button size="medium">
                  <a href="http://test.yanglao12349.com/摄像头驱动程序.exe">下载驱动</a>
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="老人照片" prop="avatar">
                <el-row>
                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                  <div @click="handleResultAvatar">
                     <img-upload
                      v-model="ruleForm.profile"
                      tips="老人照片"
                      method="profile"
                      :imgurl="profile_img"
                      :updisabled="upDisabled"
                      @result="resultAvatar"
                    ></img-upload>
                  </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="证件照" prop="id_card_front">
                <el-row>
                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                  <div @click="handleResultFront">
                    <img-upload
                      v-model="ruleForm.id_card_front"
                      tips="身份证正面"
                      method="id_card"
                      :imgurl="id_card_front_img"
                      :updisabled="upDisabled"
                      @result="resultFront"
                    ></img-upload>
                  </div>
                  </el-col>
                  <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                  <div @click="handleResultBack">
                    <img-upload
                      v-model="ruleForm.id_card_back"
                      tips="身份证反面"
                      method="id_card"
                      :imgurl="id_card_back_img"
                      :updisabled="upDisabled"
                      @result="resultBack"
                    ></img-upload>
                  </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">

          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" :loading="btnloading" @click="save(0)">
            提 交
          </el-button>
          <el-button type="primary" class="sureBtn" size="medium" :loading="btnloading" @click="save(1)">
            提交并进入下一步
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('ruleForm')"
          >
            重 置
          </el-button>
        </div>
        <div v-show="cameraDialog" class="cameraDialog_wrap" @touchmove.prevent @mousewheel.prevent>
          <el-select v-model="capType" placeholder="请选择" @change="handleChangeCap">
            <el-option key="0" label="老人照片" value="profile"></el-option>
            <el-option key="1" label="身份证正面" value="id_card_front">身份证正面</el-option>
            <el-option key="2" label="身份证反面" value="id_card_back">身份证反面</el-option>
          </el-select>
          <el-button type="primary" :loading="captureLoading" @click="Capture">{{captureLoading ? '正在上传中' : '拍照并上传'}}</el-button>
          <div id="ActiveXDivOne" ref="ActiveXDivOne" width="100%" height="400px" style="background-color: #ffffff;"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="家属信息登记 " name="second">
        <el-form
          ref="relateForm"
          :model="relateForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="relateForm.name" placeholder="请输入家属姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="relateForm.sex"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="男" :value="1"></el-option>
                  <el-option :key="1" label="女" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="手机" prop="mobile">
                <el-input
                  v-model="relateForm.mobile"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item
                label="身份证"
                prop="id_card"
                :rules="[
                  { required: false, message: '请输入身份证', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="relateForm.id_card"
                  placeholder="请输入身份证号"
                  @change="handleChangeCardAge"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="亲属关系" prop="related">
                <el-select
                  v-model="relateForm.related"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.related"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="是否监护人" prop="is_jh">
                <el-select
                  v-model="relateForm.is_jh"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="是" :value="1"></el-option>
                  <el-option :key="1" label="否" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="紧急联系人" prop="is_main">
                <el-select
                  v-model="relateForm.is_main"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="是" :value="1"></el-option>
                  <el-option :key="1" label="否" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="relateForm.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="relateSave(0)"
          >
            提 交
          </el-button>
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="relateSave(1)"
          >
            提交并进入下一步
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('relateForm')"
          >
            重 置
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="健康状况登记 " name="third">
        <el-form
          ref="healthForm"
          :model="healthForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <div class="diver-title">
            个人健康情况
            <el-button type="primary" style="margin-left: 10px" @click="handleAddHeal">添加健康测评</el-button>
          </div>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="介护等级" prop="dj">
                <el-select
                  v-model="healthForm.dj"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.dj"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="听力" prop="tl">
                <el-select
                  v-model="healthForm.tl"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.tl"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="视力" prop="sl">
                <el-select
                  v-model="healthForm.sl"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in dictDatas.sl"
                    :key="index"
                    :label="item"
                    :value="index + 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="体重" prop="tz">
                <el-input v-model="healthForm.tz" type="number">
                  <template slot="append">kg</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="传染病" prop="crb">
                <el-select
                  v-model="healthForm.crb"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="有" :value="1"></el-option>
                  <el-option :key="1" label="无" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="过敏史" prop="gms">
                <el-select
                  v-model="healthForm.gms"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="有" :value="1"></el-option>
                  <el-option :key="1" label="无" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="遗传病史" prop="ycb">
                <el-select
                  v-model="healthForm.ycb"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="有" :value="1"></el-option>
                  <el-option :key="1" label="无" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="主要疾病" prop="jbArr">
                <el-checkbox-group v-model="healthForm.jbArr">
                  <el-checkbox label="高血压" value="1"></el-checkbox>
                  <el-checkbox label="高血糖" value="2"></el-checkbox>
                  <el-checkbox label="高血脂" value="3"></el-checkbox>
                  <el-checkbox label="糖尿病" value="4"></el-checkbox>
                  <el-checkbox label="脑血栓" value="5"></el-checkbox>
                  <el-checkbox label="心梗" value="6"></el-checkbox>
                  <el-checkbox label="冠心病" value="7"></el-checkbox>
                  <el-checkbox label="颈椎病" value="8"></el-checkbox>
                  <el-checkbox label="痛风" value="9"></el-checkbox>
                  <el-checkbox label="帕金森" value="10"></el-checkbox>
                  <el-checkbox label="老年痴呆症" value="11"></el-checkbox>
                  <el-checkbox label="腰间盘突出" value="12"></el-checkbox>
                  <el-checkbox label="中风" value="13"></el-checkbox>
                  <el-checkbox label="骨质疏松" value="14"></el-checkbox>
                  <el-checkbox label="尿失禁" value="15"></el-checkbox>
                  <el-checkbox label="便秘" value="16"></el-checkbox>
                  <el-checkbox label="肾结石" value="17"></el-checkbox>
                  <el-checkbox label="肺气肿" value="18"></el-checkbox>
                  <el-checkbox label="肩周炎" value="19"></el-checkbox>
                  <el-checkbox label="慢性胃炎" value="20"></el-checkbox>
                  <el-checkbox label="消化性溃疡" value="21"></el-checkbox>
                  <el-checkbox label="慢性肝炎" value="22"></el-checkbox>
                  <el-checkbox label="慢性肾炎" value="23"></el-checkbox>
                  <el-checkbox label="慢性支气管炎" value="24"></el-checkbox>
                  <el-checkbox label="慢性肾功能衰竭" value="25"></el-checkbox>
                  <el-checkbox label="慢性腹泻" value="26"></el-checkbox>
                  <el-checkbox label="慢性胰腺炎" value="27"></el-checkbox>
                  <el-checkbox label="慢性胆囊炎" value="28"></el-checkbox>
                  <el-checkbox label="风湿性关节炎" value="29"></el-checkbox>
                  <el-checkbox label="前列腺炎" value="30"></el-checkbox>
                  <el-checkbox label="前列腺增生" value="31"></el-checkbox>
                  <el-checkbox label="肠结核" value="32"></el-checkbox>
                  <el-checkbox label="尿毒症" value="33"></el-checkbox>
                  <el-checkbox label="心脏病" value="34"></el-checkbox>
                  <el-checkbox label="哮喘" value="35"></el-checkbox>
                  <el-checkbox label="贫血" value="36"></el-checkbox>
                  <el-checkbox label="心机梗塞" value="37"></el-checkbox>
                  <el-checkbox label="皮肤病" value="38"></el-checkbox>
                  <el-checkbox label="脑梗" value="40"></el-checkbox>
                  <el-checkbox label="脑出血" value="41"></el-checkbox>
                  <el-checkbox label="脑萎缩" value="42"></el-checkbox>
                  <el-checkbox label="小儿麻痹症" value="43"></el-checkbox>
                  <el-checkbox label="其他" value="39"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="diver-title">家族病史</div>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="父亲" prop="fArr">
                <el-select
                  v-model="healthForm.fArr"
                  style="width: 100%"
                  filterable
                  clearable
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictDatas.family"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="母亲" prop="mArr">
                <el-select
                  v-model="healthForm.mArr"
                  style="width: 100%"
                  filterable
                  clearable
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictDatas.family"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="兄弟姐妹" prop="xArr">
                <el-select
                  v-model="healthForm.xArr"
                  style="width: 100%"
                  filterable
                  clearable
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictDatas.family"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="子女" prop="zArr">
                <el-select
                  v-model="healthForm.zArr"
                  style="width: 100%"
                  filterable
                  clearable
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictDatas.family"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="healthForm.remark"
                  :rows="5"
                  type="textarea"
                ></el-input>
              </el-form-item>
              <div class="tips">
                注：凡因对病史有所隐瞒所产生的一切后果，均由家属自行负责。
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="healthSave(0)"
          >
            提 交
          </el-button>
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="healthSave(1)"
          >
            提交并进入下一步
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('healthForm')"
          >
            重 置
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="styletype === 0" label="费用选择" name="fourth">
        <el-form
          ref="liveForm"
          :model="liveForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row :gutter="gutter">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="床位选择" prop="floor_str">
                <el-button type="primary" @click="handleSelectbed">
                  点击选择床位
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="床位选择" prop="floor_str">
                <!-- <el-cascader
                  ref="cascaderAddr"
                  v-model="liveForm.floor_idsArr"
                  :options="options"
                  :props="{ expandTrigger: 'hover', disabled: 'status' }"
                  style="width: 100%"
                  @change="handleChange"
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ data.label }}</span>
                    <span v-if="node.isLeaf && data.status">
                      ({{ data.status ? "不可用" : "空床位" }})
                    </span>
                  </template>
                </el-cascader> -->
                <el-input
                  v-model="liveForm.floor_str"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="床位类型" prop="bed_fees_id">
                <el-select
                  v-model="liveForm.bed_fees_id"
                  clearable
                  placeholder="请选择"
                  filterable
                  disabled
                  style="width: 100%"
                  @change="handleBedFees"
                >
                  <el-option
                    v-for="(item, index) in bed_feesData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="床位费用" prop="price">
                <el-input v-model="liveForm.price" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="床位押金" prop="deposit">
                <el-input
                  v-model="liveForm.deposit"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="护理费" prop="care_id">
                <el-select
                  v-model="liveForm.care_id"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                  @change="handleNursing"
                >
                  <el-option
                    v-for="(item, index) in nursingData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="护理费价格" prop="care_name">
                <el-input
                  v-model="liveForm.care_name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="管理费" prop="manage_name">
                <el-input
                  v-model="liveForm.manage_name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="餐费" prop="meal_id">
                <el-select
                  v-model="liveForm.meal_id"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                  @change="handleFood"
                >
                  <el-option
                    v-for="(item, index) in foodData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="餐费价格" prop="meal_name">
                <el-input
                  v-model="liveForm.meal_name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="日用品费" prop="other_amount">
                <el-input
                  v-model="liveForm.other_amount"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="入住时间" prop="live_time">
                <el-date-picker
                  v-model="liveForm.live_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="离住时间" prop="leave_time">
                <el-date-picker
                  v-model="liveForm.leave_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  :picker-options="dataPickerBeforeTodayOptions"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item
                :label="ruleForm.type == 11 ? '启动资金' : '医疗备用金'"
                prop="medical_amount"
              >
                <el-input
                  v-model="liveForm.medical_amount"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="预警金额" prop="warning_amount">
                <el-input
                  v-model="liveForm.warning_amount"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="预警电话信息" prop="warning_phone">
                <el-input
                  v-model="liveForm.warning_phone"
                  placeholder="请输入预警电话信息"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="feesSave(0)"
          >
            提 交
          </el-button>
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="feesSave(1)"
          >
            完成登记
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('liveForm')"
          >
            重 置
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="styletype === 1" label="费用选择" name="fourth">
        <el-form
          ref="tryForm"
          :model="tryForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row :gutter="gutter">
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="押金" prop="idfer">
                <el-input v-model="tryForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-form-item label="试住时间" prop="idfer">
                <el-select
                  v-model="tryForm.gender"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                  <el-option :key="1" label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium">
            提 交
          </el-button>
          <el-button type="info" class="setBtn" size="medium">重 置</el-button>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="老人健康测评" name="five">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row :gutter="gutter">
            <el-col>
                <el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入姓名"
                  ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane> -->
    </el-tabs>
    <el-dialog
      title="床位选择"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      :modal-append-to-body="true"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-tabs
          v-model="mainactive"
          type="border-card"
          @tab-click="handleTablClick"
        >
          <el-tab-pane
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :name="item.value"
          >
            <el-tabs type="card" tab-position="left">
              <el-tab-pane
                v-for="(ite, idx) in item.children"
                :key="idx"
                :label="ite.label"
              >
                <el-row :gutter="20">
                  <template v-for="(floor, i) in ite.children">
                    <el-col :key="i" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                      <div class="bedlist-item">
                        <div
                          class="bedlist-item-header"
                          :class="
                            floor.status
                              ? backgroundColor[0]
                              : backgroundColor[2]
                          "
                        >
                          <div class="bedlist-item-hl">{{ floor.label }}房</div>
                          <div class="bedlist-item-hr">
                            <div class="bedlist-item-hrt">
                              {{ floor.children[0] && floor.children[0].bed_name }}
                              <p>{{ floor.children[0] && floor.children[0].price }}元/月</p>
                            </div>
                          </div>
                        </div>
                        <div class="bedlist-content">
                          <div class="tpl2-wrap">
                            <div
                              v-for="(bedItem, bedIndex) in floor.children"
                              :key="bedIndex"
                              class="tpl2-left"
                            >
                              <div class="tpl2-title">
                                {{ bedItem.label }}床
                                <el-tag
                                  v-if="bedItem.status"
                                  size="mini"
                                  type="succes"
                                >
                                  有人入住
                                </el-tag>
                                <el-tag
                                  v-else
                                  size="mini"
                                  type="info"
                                  style="cursor: pointer"
                                  @click="
                                    handleChooseBed(
                                      `${item.label},${ite.label},${floor.label}房,${bedItem.label}床`,
                                      `${item.id},${ite.id},${floor.id},${bedItem.id}`,
                                      bedItem.type
                                    )
                                  "
                                >
                                  床位空闲
                                </el-tag>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-col>
                  </template>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <el-dialog
      title="健康测评"
      :visible.sync="dialogheadlthVisible"
      width="40%"
      :before-close="closeheadlthDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      :modal-append-to-body="true"
      class="dialogForm"
    >
      <headlthtest :data="headlthtestData" @handleGetInfo="handleGetInfo"></headlthtest>
    </el-dialog>
    <el-dialog
      title="添加测评"
      :visible.sync="dialogQuestionsVisible"
      width="60%"
      :before-close="closeQuestionsDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      :modal-append-to-body="true"
      class="dialogForm"
    >
      <healthquestions :data="questionsList" :resid="resid" @handleQuestions="handleQuestions"></healthquestions>
    </el-dialog>

    <el-dialog
      title="添加测评"
      :visible.sync="dialogHealthyVisible"
      :close-on-click-modal="false"
      width="60%"
      :append-to-body="true">
        <healthy-assess v-if="dialogHealthyVisible" @close="dialogHealthyVisible = false" :data="typedata"></healthy-assess>
    </el-dialog>
  </div>
</template>
<script>
  const validateCard = (rule, value, callback) => {
    if (!isIdCard(value)) {
      callback(new Error("请输入正确的身份证"));
    } else {
      callback();
    }
  };
  const validatePhone = (rule, value, callback) => {
    if (!isPhone(value)) {
      callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  };
  import { isIdCard, isPhone } from "@/utils/validate";
  import { getCarddetail, getBirthdayage } from "@/utils";
  import {
    getList,
    getFamily,
    getHealth,
    getFees,
    changeFormal,
    getidcardapi,
    gethealthtestlist
  } from "@/api/oldermanager";
  import { getListFood } from "@/api/foodcost";
  import { getListNursing } from "@/api/nursingcost";
  import { getData } from "@/api/floorData";
  import { getBedType } from "@/api/bedType";
  import { uploadImg } from "@/api/oldermanager";
  import imgUpload from "@/components/AppUpload/index";
  import headlthtest from "./headlthtest";
  import healthquestions from "./healthquestions";
  import healthyAssess from './healthy-assess'
  import dictData from "@/utils/dictionary";
  import addressData from "@/utils/address";
  import axios from "axios";
  import { baseURL } from "@/config/settings";
  import store from "@/store";
  import qs from 'qs';
  export default {
    name: "Index",
    components: {
      imgUpload,
      headlthtest,
      healthquestions,
      healthyAssess
    },
    props: {
      datas: {
        type: Object,
        default() {
          return {};
        },
      },
      gutter: {
        type: Number,
        default: 100,
      },
      styletype: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        baseId: "",
        f_id: "",
        h_id: "",
        activeName: "first",
        areaString: "",
        options: [],
        addressData: [],
        nursingData: [],
        bed_feesData: [],
        foodData: [],
        liveForm: {},
        tryForm: {},
        ruleForm: {},
        bedForm: {},
        relateForm: {},
        healthForm: {
          jbArr: [],
          fArr: [],
          mArr: [],
          xArr: [],
          zArr: [],
        },
        rules: {
          in_type: [
            {
              required: true,
              message: "请输入老人类别",
              trigger: "blur",
            },
          ],
          name: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
          id_card: [
            {
              required: true,
              message: "请输入身份证号",
              trigger: "blur",
            },
          ],
          age: [
            {
              required: true,
              message: "请输入年龄",
              trigger: "blur",
            },
          ],
          sex: [
            {
              required: true,
              message: "请选择性别",
              trigger: "change",
            },
          ],
          related:[{
              required: true,
              message: "请选择亲属关系",
              trigger: "change",
          }],
          mobile: [
            {
              required: true,
              message: "请输入电话",
              trigger: "blur",
            },
            {
              validator: validatePhone,
              trigger: "blur",
            },
          ],
          // id_card: [
          //   {
          //     required: true,
          //     message: "请输入身份证号",
          //     trigger: "blur",
          //   },
          //   {
          //     validator: validateCard,
          //     trigger: "blur",
          //   },
          // ],
          birthday: [
            {
              required: true,
              message: "请选择出生日期",
              trigger: "change",
            },
          ],
          type: [
            {
              required: true,
              message: "请选择老人类型",
              trigger: "change",
            },
          ],
          areaArr: [
            {
              required: true,
              message: "请选择省市",
              trigger: "change",
            },
          ],
          address: [
            {
              required: true,
              message: "请输入地址",
              trigger: "blur",
            },
          ],
          dj: [
            {
              required: true,
              message: "请选择介护等级",
              trigger: "change",
            },
          ],
          tl: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          sl: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          tz: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          crb: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          gms: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          ycb: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          jbArr: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          fArr: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          mArr: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          xArr: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          zArr: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          floor_idsArr: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          care_id: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          meal_id: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          live_time: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          leave_time: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          medical_amount: [
            {
              required: true,
              message: "请填写金额",
              trigger: "blur",
            },
          ],
          other_amount: [
            {
              required: true,
              message: "请填写金额",
              trigger: "blur",
            },
          ],
          warning_amount: [
            {
              required: true,
              message: "请填写金额",
              trigger: "blur",
            },
          ],
        },
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
        dataBeforeTodayOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        dictDatas: {},
        cameraDialog: false,
        camPlugins: {},
        upDisabled: false,
        methodType: "profile",
        profile_img: "",
        id_card_front_img: "",
        id_card_back_img: "",
        captureLoading: false,
        //床位选择
        dialogVisible: false,
        mainactive: "first",
        backgroundColor: ["colorType0", "colorType1", "colorType2"],
        camerabase64Data: "",
        capType: "profile",
        //健康测评
        dialogheadlthVisible: false,
        //添加测评
        headlthtestData: {},
        dialogQuestionsVisible: false,
        questionsList: {},
        resid: "",
        //提交基本信息按钮 loading
        btnloading: false,
        dialogHealthyVisible: false,
        typedata:{}
      };
    },
    watch: {
      datas: {
        //监听的对象
        deep: true, //深度监听设置为 true
        handler: function (newV, oldV) {
          if (JSON.stringify(newV) != "{}") {
            this.$set(this.ruleForm, "lng", newV.base.lng);
            this.$set(this.ruleForm, "address", newV.base.address);
            this.$set(this.ruleForm, "lat", newV.base.lat);
          }
        },
      },
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.dictDatas = dictData;
      this.addressData = addressData;
      this.getData();
      this.getFoodData();
      this.getNursingData();
      this.getBedTypeData();
      if (JSON.stringify(this.datas) !== "{}") {
        if (this.datas.base && JSON.stringify(this.datas.base) != "{}") {
          this.ruleForm = this.datas.base;
          let areaArr = [];
          if (this.ruleForm.area) areaArr = this.datas.base.area.split(",");
          this.$set(this.ruleForm, "areaArr", areaArr);
          if (this.datas.base.id) this.baseId = this.ruleForm.id;
          this.areaString = this.ruleForm.area_name;
        }
        if (this.datas.fees && JSON.stringify(this.datas.fees) != "{}") {
          this.liveForm = this.datas.fees;
          let floor_idsArr = [];
          if (this.liveForm.floor_ids) {
            floor_idsArr = this.liveForm.floor_ids.split(",");
          }
          this.$set(this.liveForm, "floor_idsArr", floor_idsArr);
          let params = {
            id: floor_idsArr[floor_idsArr.length - 1],
          };
        }
        if (this.datas.bed && JSON.stringify(this.datas.bed) != "{}")
          this.bedForm = this.datas.bed;
        if (this.datas.family && JSON.stringify(this.datas.family) != "{}")
          this.relateForm = this.datas.family;
        if (this.datas.health && JSON.stringify(this.datas.health) != "{}") {
          this.healthForm = this.datas.health;
          let jbArr = [];
          if (this.healthForm.jb) jbArr = this.healthForm.jb.split(",");
          this.$set(this.healthForm, "jbArr", jbArr);
          let fArr = [];
          if (this.healthForm.f) {
            fArr = this.healthForm.f.split(",");
            this.$set(this.healthForm, "fArr", fArr);
          }
          let mArr = [];
          if (this.healthForm.m) {
            mArr = this.healthForm.m.split(",");
            this.$set(this.healthForm, "mArr", mArr);
          }
          let xArr = [];
          if (this.healthForm.x) {
            xArr = this.healthForm.x.split(",");
            this.$set(this.healthForm, "xArr", xArr);
          }
          let zArr = [];
          if (this.healthForm.z) {
            zArr = this.healthForm.z.split(",");
            this.$set(this.healthForm, "zArr", zArr);
          }
        }
      }
      this.$nextTick(() => {
        if(this.$refs.ActiveXDivOne) {
          // this.upDisabled = true;
          const _this = this;
          this.camPlugins = new CarmerPlugins({camidMain: 1}, function(obj){
            obj.StartVideo()
            // _this.upDisabled = true;
            _this.camPlugins.ChangeDevice(1)
          });
          // setTimeout(function() {
          //   if(_this.obj.success == '没有发现摄像头') {
          //     _this.upDisabled = false;
          //   }else{
          //     _this.upDisabled = true;
          //   }
          // }, 1500)
        }
      })
    },
    methods: {
      handleChangeCap(value) {
        if(value == "profile"){
          this.camPlugins.ChangeDevice(1)
        } else {
          this.camPlugins.ChangeDevice(0)
        }
        this.methodType = value
      },
      handleClickPhoto(bool) {
        this.$nextTick(() => {
          if(bool) {
            this.camPlugins.ChangeDevice(1)
            if(!this.camPlugins.obj.success) {
              this.upDisabled = false;
              this.cameraDialog = false;
              this.$message.error("请先连接设备，再进行拍照或下载安装驱动程序")
            } else {
              this.upDisabled = true;
              this.cameraDialog = true;
            }
          } else {
            this.upDisabled = false;
            this.cameraDialog = false;
            this.camPlugins.ChangeDevice(2)
          }
        })
      },
      //拍照
      Capture() {
        const _this = this;
        this.camPlugins.Capture();
        this.captureLoading = true;
        setTimeout(function() {
          _this.funUpdataBase64();
        }, 1500);
      },
      //上传图片
      async funUpdataBase64() {
        let strImgBase64 = this.camPlugins.obj.base64Data.split(',')[1];
        let $Blob = getBlobBydataURI(strImgBase64, 'image/jpeg');
        let formData = new FormData();
        formData.append("file", $Blob, "file_" + Date.parse(new Date()) + ".jpeg");
        let methodType = this.methodType == "profile" ? 'profile' : 'id_card';
        formData.append("method", methodType)
        uploadImg("post", formData).then(res => {
          this.captureLoading = false;
          const data = res.data;
          if(this.methodType == "profile") {
            this.$set(this.ruleForm, "profile_id", data.id);
            this.profile_img = this.camPlugins.obj.base64Data;
          } else if(this.methodType == "id_card_front"){
            this.$set(this.ruleForm, "front_id", data.id);
            this.id_card_front_img = this.camPlugins.obj.base64Data;
          } else {
            this.$set(this.ruleForm, "back_id", data.id);
            this.id_card_back_img = this.camPlugins.obj.base64Data;
          }
          let dataBase64 = (this.camPlugins.obj.base64Data.split(',')[1]).replace(/\r/g, "");
          if(this.camPlugins.obj.base64Data && this.methodType == "id_card_front"){
            //token "24.c2c6828ab244a8b4ef77ba8b1763ede3.2592000.1622514798.282335-24102043"
            getidcardapi("post", {
              img: dataBase64,
              // token: tokenData.access_token || localStorage.getItem("client_token") || "24.c2c6828ab244a8b4ef77ba8b1763ede3.2592000.1622514798.282335-24102043"
            }).then(res => {
              const data = JSON.parse(res.data);
              if(data.image_status == 'normal') {
                this.$set(this.ruleForm, "name", data.words_result["姓名"].words);
                this.$set(this.ruleForm, "id_card", data.words_result["公民身份号码"].words);
                this.handleChangeCard(data.words_result["公民身份号码"].words)

                this.$set(this.ruleForm, "nation", data.words_result["民族"].words);
              }
              switch (data.image_status) {
                case 'normal':
                  this.$message({
                    type: "success",
                    message: "识别完成",
                  });
                  break;
                case 'reversed_side':
                  this.$message({
                    type: "success",
                    message: "身份证正反面颠倒",
                  });
                  break;
                case 'non_idcard':
                  this.$message({
                    type: "success",
                    message: "上传的图片中不包含身份证",
                  });
                  break;
                case 'blurred':
                  this.$message({
                    type: "success",
                    message: "身份证模糊",
                  });
                  break;
                case 'other_type_card':
                  this.$message({
                    type: "success",
                    message: "请放至居民身份证进行拍照",
                  });
                  break;
                case 'over_exposure':
                  this.$message({
                    type: "success",
                    message: "身份证曝光严重，无法识别",
                  });
                  break;
                case 'over_dark':
                  this.$message({
                    type: "success",
                    message: "亮度太低，请打开光源",
                  });
                  break;
              }
              switch (data.idcard_number_type) {
                case -1:
                  this.$message({
                    type: "success",
                    message: "身份证正面所有字段全为空",
                  });
                  break;
                case 0:
                  this.$message({
                    type: "success",
                    message: "身份证证号不合法，此情况下不返回身份证证号",
                  });
                  break;
                case 2:
                  this.$message({
                    type: "success",
                    message: "身份证证号和性别、出生信息都不一致",
                  });
                  break;
                case 3:
                  this.$message({
                    type: "success",
                    message: "身份证证号和出生信息不一致",
                  });
                  break;
                case 4:
                  this.$message({
                    type: "success",
                    message: "身份证证号和性别信息不一致",
                  });
                  break;
                default:
                  break;
              }
            })
          }
        })
      },
      validateCards(rule, value, callback) {
        if (!isIdCard(value)) {
          callback(new Error("请输入正确的身份证"));
        } else {
          callback();
        }
      },
      getData(data) {
        getData("get", data).then((resp) => {
          if (resp.code === 200) {
            const data = resp?.data || [];
            data.map(item => {
              item.children.map(ite => {
                ite.children.map(room => {
                  let obj = {};
                  room.children.map(bed => {
                    obj.status = room.children.filter((i) => {
                      return i.status == false;
                    });
                  })
                  room.status = obj.status && obj.status.length > 0 ? false : true;
                })
              })
            })
            this.options = resp.data;
            this.mainactive = resp.data[0].value;
          }
        });
      },
      getFoodData(data) {
        getListFood("get", data).then((resp) => {
          if (resp.code === 200) {
            this.foodData = resp.data.list;
            if (this.liveForm.meal_id) this.handleFood(this.liveForm.meal_id);
          }
        });
      },
      getNursingData(data) {
        getListNursing("get", data).then((resp) => {
          if (resp.code === 200) {
            this.nursingData = resp.data.list;
            if (this.liveForm.care_id)
              this.handleNursing(this.liveForm.care_id);
          }
        });
      },
      getBedTypeData(data) {
        getBedType("get", data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data.list;
            this.bed_feesData = data;
            if (this.liveForm.bed_fees_id)
              this.handleBedFees(this.liveForm.bed_fees_id);
          }
        });
      },
      handleBedFees(value) {
        console.log(value);
        for (let index = 0; index < this.bed_feesData.length; index++) {
          const element = this.bed_feesData[index];
          if (element.id == value) {
            this.$set(this.liveForm, "price", element.price);
            this.$set(this.liveForm, "deposit", element.deposit);
          }
          console.log(this.liveForm);
        }
      },
      save(flag) {
        this.btnloading = true;
        if (this.ruleForm.areaArr && this.ruleForm.areaArr.length > 0) {
          let area = this.ruleForm.areaArr.join(",");
          this.$set(this.ruleForm, "area", area);
          this.btnloading = false;
        }
        if (this.ruleForm.try_id) {
          this.$refs["ruleForm"].validate(async (valid) => {
            if (valid) {
              if (this.ruleForm.id) {
                changeFormal("put", this.ruleForm).then((resp) => {
                  if (resp.code === 200) {
                    this.$message({
                      type: "success",
                      message: "修改成功",
                    });
                    if (resp.data) {
                      this.baseId = resp.data.e_id;
                      this.f_id = resp.data.f_id;
                      this.h_id = resp.data.h_id;
                    }
                    this.btnloading = false;
                  }
                }).catch(() => {
                  this.btnloading = false;
                });
              } else {
                changeFormal("post", this.ruleForm).then((resp) => {
                  if (resp.code === 200) {
                    this.$message({
                      type: "success",
                      message: "添加成功",
                    });
                    if (resp.data) {
                      this.baseId = resp.data.e_id;
                      this.f_id = resp.data.f_id;
                      this.h_id = resp.data.h_id;
                    }
                    this.btnloading = false;
                  }
                }).catch(() => {
                  this.btnloading = false;
                });
              }
            }
          });
        } else {
          this.$refs["ruleForm"].validate(async (valid) => {
            if (valid) {
              if (this.ruleForm.id) {
                getList("put", this.ruleForm).then((resp) => {
                  if (resp.code === 200) {
                    this.$message({
                      type: "success",
                      message: "修改成功",
                    });
                    if (resp.data) this.baseId = resp.data.e_id;
                    //判断是否操作的是"提交并进入下一步"按钮
                    if(flag == 1){
                        //tab标签切换选中下一个,家属信息
                        this.activeName = "second";
                    }
                    this.btnloading = false;
                  }
                }).catch(() => {
                  this.btnloading = false;
                });
              } else {
                getList("post", this.ruleForm).then((resp) => {
                  if (resp.code === 200) {
                    this.$message({
                      type: "success",
                      message: "添加成功",
                    });
                    if (resp.data) this.baseId = resp.data.e_id;
                    //判断是否操作的是"提交并进入下一步"按钮
                    if(flag == 1){
                        //tab标签切换选中下一个,家属信息
                        this.activeName = "second";
                    }
                    this.btnloading = false;
                  }
                }).catch(() => {
                  this.btnloading = false;
                });
              }
            }
          });
        }
      },
      relateSave(flag) {
        if (this.baseId == "") {
          this.$message({
            type: "warning",
            message: "请先填写基本信息",
          });
          return false;
        }
        this.$set(this.relateForm, "e_id", this.baseId);
        if (this.f_id) this.$set(this.relateForm, "id", this.f_id);
        this.$refs["relateForm"].validate(async (valid) => {
          if (valid) {
            if (this.relateForm.id) {
              getFamily("put", this.relateForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.f_id = "";
                  //判断是否操作的是"提交并进入下一步"按钮
                  if(flag == 1){
                      //tab标签切换选中下一个,健康状况登记
                      this.activeName = "third";
                  }
                }
              });
            } else {
              getFamily("post", this.relateForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  //判断是否操作的是"提交并进入下一步"按钮
                  if(flag == 1){
                      //tab标签切换选中下一个,健康状况登记
                      this.activeName = "third";
                  }
                }
              });
            }
          }
        });
      },
      healthSave(flag) {
        console.log(this.healthForm);
        if (this.baseId == "") {
          this.$message({
            type: "warning",
            message: "请先填写基本信息",
          });
          return false;
        }
        this.$set(this.healthForm, "e_id", this.baseId);
        if (this.h_id) this.$set(this.relateForm, "id", this.h_id);
        let jb = this.healthForm.jbArr.join(",");
        this.$set(this.healthForm, "jb", jb);
        let f = this.healthForm.fArr.join(",");
        this.$set(this.healthForm, "f", f);
        let m = this.healthForm.mArr.join(",");
        this.$set(this.healthForm, "m", m);
        let x = this.healthForm.xArr.join(",");
        this.$set(this.healthForm, "x", x);
        let z = this.healthForm.zArr.join(",");
        this.$set(this.healthForm, "z", z);
        this.$refs["healthForm"].validate(async (valid) => {
          if (valid) {
            if (this.healthForm.id) {
              getHealth("put", this.healthForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.h_id = "";
                  //判断是否操作的是"提交并进入下一步"按钮
                  if(flag == 1){
                      //tab标签切换选中下一个,费用选择
                      this.activeName = "fourth";
                  }
                }
              });
            } else {
              getHealth("post", this.healthForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  //判断是否操作的是"提交并进入下一步"按钮
                  if(flag == 1){
                      //tab标签切换选中下一个,费用选择
                      this.activeName = "fourth";
                  }
                }
              });
            }
          }
        });
      },
      closeModel(){
        console.log("父页面方法调用");
        this.closeDialog();
      },
      feesSave(flag) {
        console.log(this.liveForm);
        if (this.baseId == "") {
          this.$message({
            type: "warning",
            message: "请先填写基本信息",
          });
          return false;
        }
        this.$set(this.liveForm, "e_id", this.baseId);
        this.$set(this.liveForm, "floor_ids", this.liveForm.floor_idsArr);
        delete this.liveForm.floor_idsArr
        this.$refs["liveForm"].validate(async (valid) => {
          if (valid) {
            console.log('this.liveForm', this.liveForm)
            if (this.liveForm.id) {
              getFees("put", this.liveForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  //判断是否操作的是"提交并进入下一步"按钮
                  if(flag == 1){
                      //tab标签切换选中下一个,关闭弹窗
                      this.$emit("show", false);
                      // this.$parent.$parent.dialogVisible = false;
                  }
                }
              });
            } else {
              getFees("post", this.liveForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  //判断是否操作的是"提交并进入下一步"按钮
                  if(flag == 1){
                      //tab标签切换选中下一个,关闭弹窗
                      this.$emit("show", false);
                  }
                }
              });
            }
          }
        });
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(tab, event) {
        let index = tab.index;
        if (index == 3) {
          if (!this.liveForm.medical_amount) {
            if (this.ruleForm.type == 11) {
              this.$set(this.liveForm, "medical_amount", 3000);
            } else {
              this.$set(this.liveForm, "medical_amount", 2000);
            }
          }

          if (!this.liveForm.other_amount)
            this.$set(this.liveForm, "other_amount", 800);
          if (!this.liveForm.warning_amount)
            this.$set(this.liveForm, "warning_amount", 0);
        }
      },
      handleChange(value, form, label) {
        this.$refs.cascaderAddr.$refs.panel.getCheckedNodes()[0].pathLabels;
        let areaString = this.$refs.cascaderAddr.$refs.panel
          .getCheckedNodes()[0]
          .pathLabels.join(",");
        this.areaString = areaString;
        if (value.length > 0) {
          let bed_id = value[value.length - 1];
          this.$set(this.liveForm, "floor_str", areaString);
          let params = {
            id: bed_id,
          };
        }
      },
      //健康测评
      closeheadlthDialog() {
        this.dialogheadlthVisible = false;
      },
      handleAddHeal() {
        if (this.baseId == "") {
          this.$message({
            type: "warning",
            message: "请先填写基本信息",
          });
          return false;
        }
        /* this.dialogheadlthVisible = true;
        this.headlthtestData = {
          e_id: this.baseId,
          name: this.ruleForm.name,
          id_card: this.ruleForm.id_card,
          mobile: this.ruleForm.mobile
        }; */
        this.dialogHealthyVisible = true;
        this.typedata = { ...{ name: this.ruleForm.name, eid: this.baseId } };
      },
      handleGetInfo(resid) {

        this.resid = resid;
        this.dialogheadlthVisible = false;
        gethealthtestlist().then(res => {
          this.questionsList = res.data?.list || {};
          this.$nextTick(() => {
            this.dialogQuestionsVisible = true;
          })
        })
      },
      handleQuestions() {
        this.dialogQuestionsVisible = false;
        this.dialogheadlthVisible = false;
      },
      //添加测评
      closeQuestionsDialog() {
        this.dialogQuestionsVisible = false;
      },
      //点击选择床位
      handleSelectbed() {
        this.dialogVisible = true;
      },
      closeDialog() {
        this.dialogVisible = false;
        this.formData = {
          base: {},
        };
      },
      handleTablClick() {},
      handleChooseBed(value, id, type) {
        this.dialogVisible = false;
        this.handleBedFees(type);
        this.$set(this.liveForm, "bed_fees_id", type);
        this.$set(this.liveForm, "floor_str", value);
        this.$set(this.liveForm, "floor_idsArr", id.split(","));
      },
      handleChangeCardAge(value) {
        const userInfo = getCarddetail(value);
        if (userInfo) {
          this.$set(this.relateForm, "sex", userInfo.sex);
        }
      },
      handleChangeCard(value) {
        const userInfo = getCarddetail(value);
        if (userInfo) {
          this.$set(this.ruleForm, "birthday", userInfo.birthday);
          this.$set(this.ruleForm, "age", userInfo.age);
          this.$set(this.ruleForm, "sex", userInfo.sex);
        }
      },
      handleBirthdayToage(value) {
        const age = getBirthdayage(value);
        this.$set(this.ruleForm, "age", age);
      },
      handleChangeAddress(value, form, label) {
        // this.$refs.cascaderAddr1.$refs.panel.getCheckedNodes()[0].pathLabels;
        let areaString = this.$refs.cascaderAddr1.$refs.panel
          .getCheckedNodes()[0]
          .pathLabels.join(",");
        this.areaString = areaString;
      },
      handleFood(value) {
        for (let i = 0; i < this.foodData.length; i++) {
          const element = this.foodData[i];
          if (element.id == value) {
            this.$set(this.liveForm, "meal_name", element.price);
          }
        }
      },
      handleNursing(value) {
        for (let i = 0; i < this.nursingData.length; i++) {
          const element = this.nursingData[i];
          if (element.id == value) {
            this.$set(this.liveForm, "care_name", element.price);
            this.$set(this.liveForm, "manage_name", element.manage_price);
          }
        }
      },
      handleMap() {
        if (!this.ruleForm.areaArr || this.ruleForm.areaArr == "") {
          this.$message({
            type: "warning",
            message: "请先选择所在地",
          });
          return false;
        }
        if (!this.ruleForm.address || this.ruleForm.address == "") {
          this.$message({
            type: "warning",
            message: "请先填写详细地址",
          });
          return false;
        }
        this.$emit("handleMap", this.areaString + this.ruleForm.address);
      },
      handleResultAvatar() {
        console.log(this.camPlugins.obj)
        this.camPlugins.ChangeDevice(1)
        this.methodType = "profile";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "profile";
        // }
      },
      handleResultFront() {
        this.camPlugins.ChangeDevice(0)
        this.methodType = "id_card_front";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "id_card_front";
        // }
      },
      handleResultBack() {
        this.camPlugins.ChangeDevice(0)
        this.methodType = "id_card_back";
        // if(!this.camPlugins.obj.success){
        //   this.upDisabled = false;
        // }else{
        //   this.upDisabled = true;
        //   this.cameraDialog = true;
        //   this.methodType = "id_card_back";
        // }
      },
      resultAvatar(data) {
        this.$set(this.ruleForm, "profile_id", data.id);
      },
      resultFront(data) {
        this.$set(this.ruleForm, "front_id", data.id);
      },
      resultBack(data) {
        this.$set(this.ruleForm, "back_id", data.id);
      },
    },
  };
</script>
<style lang="scss" scoped>
.cameraDialog_wrap{
  position: absolute;
  text-align: center;
  right: 8%;
  top: 11%;
  .el-select{
    float: left;
  }
  button{
    margin-left: 20px;
    float: left;
    margin-bottom: 20px;
  }
}
  .el-tabs {
    ::v-deep {
      .el-tabs__header {
        margin-bottom: 24px;
      }
    }
  }

  .el-form-item {
    margin-bottom: 24px;
  }

  .selectClass {
    width: 100%;
  }

  .form-footer {
    padding-left: 100px;
  }

  .diver-title {
    margin-bottom: 24px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
  }

  .tips {
    margin-bottom: 24px;
    padding-left: 100px;
    font-size: 16px;
    color: #ff4d50;
  }

  .dialog-main {
    min-height: 300px;
    ::v-deep {
      .el-col {
        margin: 10px 0;
      }
    }
    .colorType0 {
      background: #18ba39;
    }
    .colorType1 {
      background: #e0c720;
    }
    .colorType2 {
      background: #999;
    }
    .bedlist-item {
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      box-sizing: border-box;
      .bedlist-item-header {
        width: 100%;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #dddfe7;
        box-sizing: border-box;
        .bedlist-item-hl {
          display: inline-block;
          width: 30%;
          text-align: center;
          //color: darkred;
          color: #fff;
          font-weight: bold;
        }
        .bedlist-item-hr {
          display: inline-block;
          width: 70%;
          border-left: 1px solid #dddfe7;
          padding: 10px 0;
          .bedlist-item-hrt {
            font-size: 16px;
            text-align: center;
            color: #fff;
          }
          .bedlist-item-hrb {
            border-top: 1px solid #dddfe7;
            margin-top: 10px;
            text-align: right;
            padding: 10px 10px 0 10px;
            ::v-deep {
              .el-button--mini {
                padding: 5px 6px;
              }
            }
          }
        }
      }
    }
    .tpl2-wrap {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #dddfe7;
      border-top: none;
      display: flex;
      justify-content: space-between;
      overflow-x: scroll;
      .tpl2-left {
        width: 50%;
        padding: 10px;
        &:nth-child(n + 2) {
          border-left: 1px solid #dddfe7;
        }
      }
      .tpl2-title {
        color: #f60;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }
      .tpl2-content {
        display: flex;
        justify-content: space-between;
        margin: 10px;
      }
      .tpl2-action {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        span {
          cursor: pointer;
          &:hover {
            color: #1791ff;
          }
        }
      }
      .elderWrapper {
        display: flex;

        .elderAvatar {
          display: flex;
          flex: 0 0 200px;
          align-items: center;
          width: 200px;
          height: 200px;
          margin-right: 20px;
          overflow: hidden;
          border-radius: 5px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .elderInfo {
          p {
            width: 202px;
            overflow: hidden;
            font-style: 14px;
            line-height: 24px;
            color: #fff;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              color: #2cc1bb;
            }
          }
        }
      }
    }
  }

  .warning-type {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    margin-bottom: 12px;
    line-height: 48px;
    background: #f6f7fa;

    h3 {
      font-size: 20px;
      font-weight: 500;
      color: #1791ff;

      span {
        font-size: 16px;
        color: #ff4d50;
      }
    }

    .frbtn {
      height: 48px;
      margin-left: 16px;
      line-height: 48px;
    }
  }

  .card-container {
    margin-bottom: 10px;

    .el-card {
      border-radius: 4px;

      ::v-deep {
        .el-card__header {
          height: 44x;
          padding: 0 12px;
          line-height: 44px;
          background: #18ba39;
        }

        .el-card__body {
          box-sizing: border-box;
          height: 80px;
          padding: 12px;
          text-align: center;

          .num,
          .type,
          .price {
            margin-bottom: 12px;
            font-size: 16px;
            line-height: 24px;
            color: #333;
          }

          .price {
            color: #ff4d50;
          }

          .status {
            display: flex;
            line-height: 24px;

            span {
              flex: 1;
              color: #1791ff;
            }
          }
        }
      }
    }

    .el-card.colorType0 {
      ::v-deep {
        .el-card__header {
          background: #18ba39;
        }
      }
    }

    .el-card.colorType1 {
      ::v-deep {
        .el-card__header {
          background: #e0c720;
        }
      }
    }

    .el-card.colorType2 {
      ::v-deep {
        .el-card__header {
          background: #999;
        }
      }
    }

    .header {
      position: relative;
      display: flex;
      color: #fff;
      justify-content: space-between;
      span {
        font-size: 18px;
        text-align: center;

        &:first-child {
          text-align: left;
        }

        i {
          font-size: 12px;
          font-style: normal;
          color: rgba($color: #fff, $alpha: 0.5);
        }
      }
    }
  }

  .bed-floor {
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .bed-man-img {
    margin-top: 5px;
    overflow: hidden;
    img {
      float: left;
      widows: 2px;
      height: 20px;
    }
    span {
      font-size: 14px;
      float: left;
      margin-left: 10px;
      line-height: 20px;
    }
  }
</style>
